class Register {
    constructor() {
        // 设置获得焦点事件,获得提示
        this.$('#name').onfocus=()=>{
            this.$('#one').innerHTML='请输入以字母开头的5-6位账号'
        }
        this.$('#password').onfocus=()=>{
            this.$('#two').innerHTML='请输入6位数字密码'
        }
        this.$('#repeatpassword').onfocus=()=>{
            this.$('#three').innerHTML='请保证与登陆密码一致'
        }
        // 设置失去焦点事件
        this.$('#name').addEventListener('blur',this.one);
        this.$('#password').addEventListener('blur',this.two);
        this.$('#repeatpassword').addEventListener('blur',this.three);
        // 给提交按钮添加事件
        this.$('.registerButtonTD button').addEventListener('click',this.reset)
    }
    /* *********第1个设置登录名验证******* */
    one=()=>{
        //获取用户设置的内容
        let str=this.$('#name').value.trim();
        // console.log(str);
        let objOne=/^[a-zA-Z]{1}\w{3,4}\w{1}$/
        let result=objOne.test(str);
        let node=this.$('#one');
        if(result){
            node.innerHTML='符合要求';
            node.style.color='green';
            node.setAttribute('data-id',1);
            Register.uname=str;
        }else{
            node.innerHTML='不符合要求';
            node.style.color='red'
            node.setAttribute('data-id',0)
        }
    }
    /* *********第2个设置登录名验证******* */
    two=()=>{
        // console.log(22222);
        let str=this.$('#password').value.trim();
        // console.log(str);
        let objOne=/^\d{1}\d{4}\d{1}$/
        let result=objOne.test(str);
        let node=this.$('#two');
        if(result){
            node.innerHTML='符合要求';
            node.style.color='green';
            Register.password=str;
            node.setAttribute('data-id',1)
        }else{
            node.innerHTML='不符合要求';
            node.style.color='red'
            node.setAttribute('data-id',0)
        }
    }
    /* *********第3个设置登录名验证******* */
    three=()=>{
        // console.log(33333);
        let str=this.$('#repeatpassword').value.trim();
        // console.log(str);
        let node=this.$('#three');
        if(str==Register.password){
            node.innerHTML='符合要求';
            node.style.color='green';
            node.setAttribute('data-id',1)
            Register.repeatpassword=str;
        }else{
            node.innerHTML='与登陆密码不一致,请重新输入';
            node.style.color='red'
            node.setAttribute('data-id',0)
        }
    }
    /* *********提交函数************ */
    reset=()=>{
        // 获取所有的小span
        let span = this.$('.registerTableSpan span');
        // console.log(span);
        //转化为数组,判断如果每一个的data-id都为1,则代表所有的均合格
        let result=[...span].every(ele=>ele.dataset.id==1);
        // console.log(result);
        if(result){
            // 获取储存在class类中的属性
            // console.log(Register.uname,Register.password,Register.repeatpassword);
            //设置请求头
            axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
            // 拼接字符串
           let str=`username=${Register.uname}&password=${Register.password}&rpassword=${Register.repeatpassword}&nickname=1`
           //发送至服务器
           axios.post('http://localhost:8888/users/register',str)
           .then((res)=>{
               console.log(res);
               if(res.data.code==1){
                location.assign('login.html')
               }else if(res.data.code==0){
                   alert('该用户名已存在')
               }
           })
        }else{
            alert('请认真填写,再提交')
        }
    }
    /* *****获取节点的方法****** */
    $(ele) {
        let node = document.querySelectorAll(ele)
        return node.length == 1 ? node[0] : node;
    }
}
new Register;